<template>
    <div id="lora-pic-page">

        <!-- 头部开始 -->
        <div class="header">
            <div class="up">
                <h1>kolors国风描金插画</h1>
                <div class="label">AiZ推荐</div>
                <el-tooltip content="生成数量" placement="top">
                    <div class="icon">
                        <el-icon>
                            <Position />
                        </el-icon>48
                    </div>
                </el-tooltip>
                <el-tooltip content="下载次数" placement="top">
                    <div class="icon">
                        <el-icon>
                            <Download />
                        </el-icon>48
                    </div>
                </el-tooltip>
                <el-tooltip content="喜欢" placement="top">
                    <div class="icon">
                        <el-icon>
                            <Star />
                        </el-icon>
                        48
                    </div>
                </el-tooltip>
            </div>
            <div class="bottom">
                <el-tag>中国风</el-tag>
                <el-tag>艺术插画</el-tag>
                <el-tag>风景</el-tag>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 生成图片和作者内容开始 -->
        <div class="pic-author">
            <div class="pic">
                <div class="version-time">
                    <div class="version">V1.0</div>
                    <div class="time">最近发布于2023/4/23</div>
                </div>
                <div class="swiper">
                    <el-carousel :autoplay="false" height="520px" arrow="always" indicator-position="none">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <img class=""
                                src="http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
                                alt="">
                            <img class="image-1"
                                src="http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
                                alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- 模型简介开始 -->
                <div class="model-intro">
                    <h2>版本内容：欧式建筑风格</h2>
                    <ol>
                        <li>djfksfj</li>
                        <li>djfksfj</li>
                        <li>djfksfj</li>
                    </ol>
                    <h2>参数说明</h2>
                    <p>sjdflsjfl</p>
                    <p>sdlfkjslfjslf sdfsfjlsdkfjsdl </p>
                    <p>sljfdasjflkasjflksajdfl</p>
                </div>
                <!-- 模型简介结束 -->

                <!-- 评论开始 -->
                <div class="comment-board">
                    <div class="header">
                        <div class="left">
                            <span>交流</span>
                            <span>43</span>
                        </div>
                        <div class="right">
                            <span class="active">最新内容</span>
                            <span class="line"></span>
                            <span>热门内容</span>
                        </div>
                    </div>

                    <div class="comment-area">
                        <el-input v-model="commentConent" placeholder="善言善语结善缘，恶言恶语伤人心..." class="input-with-select">

                            <template #append>
                                <span>发送</span>
                            </template>
                        </el-input>
                    </div>

                    <div class="comments">
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                        <CommentItem></CommentItem>
                    </div>
                </div>
                <!-- 评论结束 -->
            </div>
            <div class="author">
                <div class="report">
                    <el-tooltip content="举报" placement="top">
                        <el-icon>
                            <Notebook />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div class="author-info">
                    <div class="avatar">
                        <img src="http://gips1.baidu.com/it/u=1658389554,617110073&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
                            alt="">

                    </div>
                    <div class="info">
                        <div class="name">壹壹的快力</div>
                        <div class="label">Ai小张原创</div>
                        <div class="data">
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>332
                            </span>
                            <span>
                                <el-icon>
                                    <Download />
                                </el-icon>34k
                            </span>
                        </div>
                    </div>
                </div>
                <el-button :icon="Star" type="primary" @click="goCreateLoraPage">立即生图</el-button>
                <div class="join-vip">
                    <el-button :icon="CirclePlus" type="default">加入模型库</el-button>
                    <div class="gap"></div>
                    <el-button :icon="Download" type="warning">会员下载</el-button>
                </div>
                <!-- 版本信息开始 -->
                <div class="lora-version">
                    <div class="title">版本详情</div>
                    <div class="table">
                        <div class="left">
                            <div>类型</div>
                            <div>在线生成数</div>
                            <div>下载量</div>
                            <div>基础算法</div>
                            <div>触发词</div>
                        </div>
                        <div class="right">
                            <el-tag>LORA</el-tag>
                            <div>98</div>
                            <div>342</div>
                            <div>Kolors</div>
                            <el-tag>中国风、水墨画、留白</el-tag>
                        </div>
                    </div>
                </div>
                <!-- 版本信息结束 -->
            </div>
        </div>
        <!-- 生成图片和作者内容结束 -->

        <!-- 推荐内容开始 -->
        <div class="recommend">
            <div class="header">
                <h3>最新推荐</h3>
                <el-button round type="primary">我要晒晒</el-button>
            </div>
            <div class="items">

                <div class="column">
                    <img src="https://gips3.baidu.com/it/u=3948031753,760649905&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f800_600"
                        alt="">
                    <img src="http://gips0.baidu.com/it/u=3375143540,3287761352&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
                        alt="">
                    <img src="http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
                        alt="">

                </div>
                <div class="column">

                    <img src="https://gips0.baidu.com/it/u=567323913,331130417&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000"
                        alt="">
                    <img src="https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560"
                        alt="" srcset="">
                    <img src="http://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                        alt="" srcset="">

                </div>
                <div class="column">
                    <img src="http://gips3.baidu.com/it/u=4283915297,3700662292&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560"
                        alt="">
                    <img src="http://gips0.baidu.com/it/u=3822353666,2757632348&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280"
                        alt="" srcset="">
                    <img src="http://gips2.baidu.com/it/u=3944689179,983354166&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                        alt="">

                </div>

                <div class="column">
                    <img src="http://gips1.baidu.com/it/u=1239311027,2819893885&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                        alt="">
                    <img src="http://gips3.baidu.com/it/u=1874299413,3253595329&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
                        alt="">

                </div>
            </div>
        </div>
        <!-- 推荐内容结束 -->
    </div>
</template>

<script setup>
import { ref } from "vue"
import {useRouter} from "vue-router"
import { Position, Download, Star, CirclePlus, Notebook, PictureFilled } from "@element-plus/icons-vue"
import CommentItem from "../functioncomp/CommentItem.vue"

const router = useRouter()
const commentConent = ref("")

const goCreateLoraPage = ()=>{
    router.push("/createlorapage")
}
</script>

<style scoped>
#lora-pic-page {
    width: 100%;
    padding: 20px;
}

#lora-pic-page .header .up {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}

#lora-pic-page .header .up .label {
    color: white;
    font-size: 12px;
    background-color: rgba(255, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 20px;
    margin: 0 15px;
}

#lora-pic-page .header .up .icon {
    margin: 0 10px;
    background-color: rgba(128, 128, 128, 0.3);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
}

#lora-pic-page .header .bottom .el-tag {
    margin: 5px;
}

#lora-pic-page .pic-author {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    margin-top: 20px;
}

#lora-pic-page .pic-author .pic {
    width: 65%;
}

#lora-pic-page .pic-author .pic .version-time {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    margin-bottom: 10px;
    padding-bottom: 5px;
}

#lora-pic-page .pic-author .pic .version-time .version {
    font-size: 15px;
    font-weight: 900;
    border-bottom: 5px solid #409EFF;
}

#lora-pic-page .pic-author .pic .version-time .time {
    font-size: 10px;
    color: gray;
}

#lora-pic-page .pic-author .pic .swiper img {
    width: 50%;
    height: 500px;
    border-radius: 15px;
    padding: 5px;
}

#lora-pic-page .pic-author .pic .swiper .el-carousel__item {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}

#lora-pic-page .pic-author .author {
    width: 35%;
    padding: 0 20px;
}

#lora-pic-page .pic-author .author .report {
    line-height: 40px;
}

#lora-pic-page .pic-author .author .author-info {
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.2);
    display: flex;
    display: -webkit-flex;

}

#lora-pic-page .pic-author .author .author-info .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

#lora-pic-page .pic-author .author .author-info .info {
    margin-left: 20px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
}


#lora-pic-page .pic-author .author .author-info .info .name {
    color: black;
    font-size: 20px;
    font-weight: bolder;
}


#lora-pic-page .pic-author .author .author-info .info .label {
    background-color: goldenrod;
    padding: 2px 0;
    font-size: 12px;
    color: white;
    text-align: center;
    border-radius: 2px;
}


#lora-pic-page .pic-author .author .author-info .info .data {
    color: gray;
    font-size: 12px;
}


#lora-pic-page .pic-author .author .author-info .info span {
    margin: 0 10px;
}

#lora-pic-page .pic-author .author .el-button {
    width: 100%;
    height: 60px;
    margin-top: 30px;
    font-size: 20px;
}

#lora-pic-page .pic-author .author .join-vip {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

#lora-pic-page .pic-author .author .join-vip .el-button {
    margin-top: 10px;
}

#lora-pic-page .pic-author .author .join-vip .gap {
    width: 10%;
}

#lora-pic-page .pic-author .author .lora-version {
    margin-top: 20px;
    border-radius: 5px;
    border: 1px solid rgba(128, 128, 128, 0.2);
}

#lora-pic-page .pic-author .author .lora-version .title {
    font-size: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 10px;
}

#lora-pic-page .pic-author .author .lora-version .table {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    font-size: 12px;
    color: gray;
    height: 150px;
}

#lora-pic-page .pic-author .author .lora-version .table .left {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(128, 128, 128, 0.2);
    padding: 10px;
}


#lora-pic-page .pic-author .author .lora-version .table .right {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

#lora-pic-page .pic-author .pic .comment-board .header {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}


#lora-pic-page .pic-author .pic .comment-board .header .left :first-child {
    font-size: 18px;
    font-weight: bolder;
}

#lora-pic-page .pic-author .pic .comment-board .header .left :last-child {
    font-size: 14px;
    color: gray;
    margin-left: 7px;
}


#lora-pic-page .pic-author .pic .comment-board .header .right span {
    font-size: 14px;
    color: gray;
}


#lora-pic-page .pic-author .pic .comment-board .header .right :nth-child(2) {
    margin: 0 10px;
    border: 1px solid gray;
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
}


#lora-pic-page .pic-author .pic .comment-board .header .right .active {
    color: black;
}


#lora-pic-page .pic-author .pic .comment-board .comment-area {
    padding: 15px;
    margin-top: 20px;
    border-radius: 6px;
    background-color: rgba(128, 128, 128, 0.2);
}


#lora-pic-page .pic-author .pic .comment-board .comments {
    width: 100%;
    height: 700px;
    overflow-y: scroll;
}

#lora-pic-page .recommend {
    width: 87%;
    background-color: rgba(128, 128, 128, 0.2);
    border-radius: 5px;
    padding: 10px;
    margin-top: 40px;
}

#lora-pic-page .recommend .header {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

#lora-pic-page .recommend .items {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    width: 100%;
}

#lora-pic-page .recommend .items .column {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 10px;
}

#lora-pic-page .recommend .items img {
    cursor: pointer;
    margin-top: 10px;
    border-radius: 10px;
    width: 100%;
    object-fit: cover;
}
</style>